<template>
  <div class="app-container">
    <div class="filter-header">
      <div class="filter-item">
        <el-input v-model="listQuery.hotel_name" placeholder="请输入酒店名称" clearable />
      </div>
      <div class="filter-item">
        <el-select v-model="listQuery.form_type" placeholder="携程订单类型" clearable>
          <el-option :label="item.label" :value="item.value" v-for="item, index in XCOrderType" :key="index" />
        </el-select>
      </div>
      <div class="filter-item">
        <el-input v-model="listQuery.new_dlt_order_id" placeholder="请输入携程订单号" clearable />
      </div>

      <div class="filter-item">
        <el-input v-model="listQuery.order_code" placeholder="请输入锦江订单号" clearable />
      </div>
      <div class="filter-item">
        <el-select v-model="listQuery.dlt_order_status" placeholder="携程订单状态" clearable>
          <el-option :label="item.label" :value="item.value" v-for="item, index in XCOrderStateList" :key="index" />
        </el-select>
      </div>
      <div class="filter-item">
        <el-select v-model="listQuery.order_state" placeholder="锦江订单状态" clearable>
          <el-option :label="item.label" :value="item.value" v-for="item, index in jjOrderStateList" :key="index" />
        </el-select>
      </div>
      <div class="filter-item">
        <el-select v-model="listQuery.system_order_status" placeholder="系统订单状态" clearable>
          <el-option :label="item.label" :value="item.value" v-for="item, index in orderStateList" :key="index" />
        </el-select>
      </div>

      <div class="filter-item">
        <el-button icon="el-icon-search" :loading="listLoading" type="primary" @click="handleFilter">搜索</el-button>
      </div>
    </div>

    <div class="table">
      <el-table :data="dataList" border style="width: 100%" :row-class-name="errorRow" v-loading="listLoading">
        <el-table-column prop="new_dlt_order_id" align="center" label="携程订单号" min-width="110">
        </el-table-column>

        <el-table-column prop="order_date" align="center" label="携程下单时间" min-width="160">
        </el-table-column>

        <el-table-column prop="form_type" align="center" label="携程订单类型" min-width="110">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.form_type === 'N'">新订</el-tag>
            <el-tag type="success" v-else-if="scope.row.form_type == 'M'">修改</el-tag>
            <el-tag type="warning" v-else-if="scope.row.form_type == 'C'">取消</el-tag>
            <el-tag v-else-if="scope.row.form_type == 'D'">续住</el-tag>
            <el-tag type="info" v-else-if="scope.row.form_type == 'S'">(新)无效</el-tag>
            <el-tag type="info" v-else-if="scope.row.form_type == 'T'">(改)无效</el-tag>
            <el-tag type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="dlt_order_status" align="center" label="携程订单状态" min-width="130">
          <template slot-scope="scope">
            <el-tag type="success">{{ getDlt_order_status(scope.row.dlt_order_status) }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="hotel_name" align="center" label="酒店名称" min-width="110">
        </el-table-column>

        <el-table-column prop="room_type_name" align="center" label="房型名称" min-width="110">
        </el-table-column>

        <el-table-column prop="checkin_date" align="center" label="入住时间" min-width="110">
        </el-table-column>

        <el-table-column prop="checkout_date" align="center" label="离店时间" min-width="110">
        </el-table-column>

        <el-table-column prop="dlt_order_info.ccStatus" align="center" label="客诉状态" min-width="110">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.dlt_order_info.ccStatus === 1">处理中</el-tag>
            <el-tag type="success" v-else-if="scope.row.dlt_order_info.ccStatus == 2">已处理</el-tag>
            <el-tag type="warning" v-else-if="scope.row.dlt_order_info.ccStatus == 0">未处理</el-tag>
            <el-tag type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="dlt_order_info.ccAlertStatus" align="center" label="预警状态" min-width="110">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.dlt_order_info.ccAlertStatus === -1">超时</el-tag>
            <el-tag type="warning" v-else-if="scope.row.dlt_order_info.ccAlertStatus == 0">未处理</el-tag>
            <el-tag type="success" v-else-if="scope.row.dlt_order_info.ccAlertStatus == 1">已处理</el-tag>
            <el-tag type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="order_code" align="center" label="锦江订单号" min-width="130">
          <template slot-scope="scope">
            <div v-if="scope.row.order_code">{{ scope.row.order_code }}</div>
            <el-tag type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="last_arr_time" align="center" label="锦江到店时间" min-width="160">
          <template slot-scope="scope">
            <div v-if="scope.row.last_arr_time">{{ scope.row.last_arr_time }}</div>
            <el-tag type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pay_state" align="center" label="锦江支付状态" min-width="130">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.pay_state == 0">未付款</el-tag>
            <el-tag type="success" v-else-if="scope.row.pay_state == 1">已付款</el-tag>
            <el-tag type="warning" v-else-if="scope.row.pay_state == 2">退款处理中</el-tag>
            <el-tag type="danger" v-else-if="scope.row.pay_state == 3">已退款</el-tag>
            <el-tag type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="order_state" align="center" label="锦江订单状态" min-width="120">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.order_state === 0">未付款</el-tag>
            <el-tag type="success" v-else-if="scope.row.order_state === 1">预订成功</el-tag>
            <el-tag v-else-if="scope.row.order_state === 2">已取消</el-tag>
            <el-tag type="success" v-else-if="scope.row.order_state === 3">预订未到</el-tag>
            <el-tag type="success" v-else-if="scope.row.order_state === 4">已入住</el-tag>
            <el-tag type="success" v-else-if="scope.row.order_state === 5">已完成</el-tag>
            <el-tag type="info" v-else>暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="system_order_status" align="center" label="系统订单状态" min-width="120"
          row-class-name="warning-row">
          <template slot-scope="scope">
            <el-tag :type="getOrder_status(scope.row.system_order_status).type">{{
          getOrder_status(scope.row.system_order_status).label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="handle_error_message" align="center" label="操作处理失败信息" min-width="160">
          <template slot-scope="scope">
            <div type="success" v-if="scope.row.handle_error_message">{{ scope.row.handle_error_message }}</div>
            <div type="info" v-else>暂无</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="330">
          <template slot-scope="scope">
            <div class="row-bg" style="display: flex;flex-wrap: wrap;">

              <el-button class="btn" size="small" @click="handleUpdate(scope.row, 'setTime')" type="warning"
                :disabled="!((scope.row.form_type == 'N' || scope.row.form_type == 'D' || scope.row.form_type == 'M') && (scope.row.dlt_order_status == 101 || scope.row.dlt_order_status == 401 || scope.row.dlt_order_status == 301) && scope.row.system_order_status == 102)">
                修改到店时间
              </el-button>
              <el-button class="btn" size="small" type="warning" @click="changeReOrder(scope.row.new_dlt_order_id)"
                :disabled="!((scope.row.form_type == 'N' || scope.row.form_type == 'D' || scope.row.form_type == 'M') && (scope.row.dlt_order_status == 101 || scope.row.dlt_order_status == 401 || scope.row.dlt_order_status == 301) && scope.row.system_order_status == 102)">
                重新下单
              </el-button>
              <el-button class="btn" size="small" type="warning" @click="changeCancelOrder(scope.row.new_dlt_order_id)"
                :disabled="scope.row.order_state != 1">
                取消订单
              </el-button>
              <!-- <el-button class="btn" size="small" type="danger" @click="changeReAcceptOrder(scope.row.new_dlt_order_id)"
                :disabled="!((scope.row.form_type == 'N' || scope.row.form_type == 'D') && (scope.row.dlt_order_status == 100 || scope.row.dlt_order_status == 400) && (scope.row.system_order_status == 104 || scope.row.system_order_status == 106))">
                重新接受订单
              </el-button> -->

              <!-- <el-button class="btn" size="small" type="danger" @click="handleUpdate(scope.row, 'Reject')"
                :disabled="!((scope.row.form_type == 'N' || scope.row.form_type == 'D') && scope.row.dlt_order_status == 100)">
                拒绝订单
              </el-button> -->
              <!-- <el-button class="btn" size="small" type="danger" @click="changeRefuseOrder(scope.row.new_dlt_order_id)"
                :disabled="!((scope.row.form_type == 'N' || scope.row.form_type == 'D') && (scope.row.dlt_order_status == 100 || scope.row.dlt_order_status == 400))">
                拒绝订单
              </el-button> -->
              <!-- <el-button class="btn" size="small" type="danger" @click="changeAcceptCancel(scope.row.new_dlt_order_id)"
                :disabled="!(scope.row.form_type == 'C' && scope.row.dlt_order_status == 200 && scope.row.system_order_status !== 203 && scope.row.system_order_status !== 205)">
                接受取消
              </el-button> -->
              <!-- <el-button class="btn" size="small" type="danger" @click="handleUpdate(scope.row, 'Cancel')"
                :disabled="!(scope.row.form_type == 'C' && scope.row.dlt_order_status == 200 && scope.row.system_order_status !== 203 && scope.row.system_order_status !== 205)">
                拒绝取消
              </el-button> -->
              <el-button class="btn" size="small" type="danger"
                @click="changeReConfirmCheckin(scope.row.new_dlt_order_id)"
                :disabled="!((scope.row.form_type == 'N' || scope.row.form_type == 'D') && scope.row.dlt_order_status == 302 && (scope.row.order_state == 4 || scope.row.order_state == 5) && scope.row.order_state == 302)">
                重新确认入住
              </el-button>
              <el-button class="btn" @click="orderDetailHandler(scope.row)" size="small" type="primary">订单详情</el-button>
              <el-button class="btn" @click="changehandleComplete(scope.row.new_dlt_order_id)" size="small"
                type="primary" :disabled="geterrorStatus(scope.row)">处理完成</el-button>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
        :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <OrderDetail v-if="orderDetailActive" :show.sync="orderDetailActive" :data="authData" />

    <AddAuth v-if="addAuthVisible" :show.sync="addAuthVisible" :type="activeType" :authData="authData"
      @update="getList" />
  </div>
</template>

<script>
import OrderDetail from './components/orderDetail'
import AddAuth from './components/addAuth.vue'
import { orderList, reOrder, cancelOrder, reAcceptOrder, refuseOrder, acceptCancel, reConfirmCheckin, handleComplete } from '@/api/common'
export default {
  data() {
    return {
      listQuery: {
        limit: 10,
        page: 1,
        form_type: '',//携程订单类型
        new_dlt_order_id: '',//携程订单号
        hotel_name: '',//酒店名称
        order_code: '',//锦江订单号
        wynOrderId: '',
        system_order_status: '',//系统订单状态
        order_state: '',//锦江订单状态
        dlt_order_status: '',//携程订单状态
      },
      total: 0,
      listLoading: false,

      XCOrderType: [
        {
          "value": 'N',
          "label": "新订"
        },
        {
          "value": 'M',
          "label": "修改"
        },
        {
          "value": 'C',
          "label": "取消"
        },
        {
          "value": 'D',
          "label": "续住"
        },
        {
          "value": 'S',
          "label": "(新)无效"
        },
        {
          "value": 'T',
          "label": "(改)无效"
        },
      ],
      orderStateList: [
        {
          "value": 100,
          "label": "下单待处理",
          "type": "info"
        },
        {
          "value": 101,
          "label": "下单成功",
          "type": "success"
        },
        {
          "value": 102,
          "label": "下单失败",
          "type": "danger"
        },
        {
          "value": 103,
          "label": "接受订单成功",
          "type": "success"
        },
        {
          "value": 104,
          "label": "接受订单失败",
          "type": "danger"
        },
        {
          "value": 105,
          "label": "拒绝订单成功",
          "type": "success"
        },
        {
          "value": 106,
          "label": "拒绝订单失败",
          "type": "danger"
        },
        {
          "value": 201,
          "label": "取消订单成功",
          "type": "success"
        },
        {
          "value": 202,
          "label": "取消订单失败",
          "type": "danger"
        },
        {
          "value": 203,
          "label": "接受取消成功",
          "type": "success"
        },
        {
          "value": 204,
          "label": "接受取消失败",
          "type": "danger"
        },
        {
          "value": 205,
          "label": "拒绝取消成功",
          "type": "success"
        },
        {
          "value": 206,
          "label": "拒绝取消失败",
          "type": "danger"
        },
        {
          "value": 301,
          "label": "确认入住成功",
          "type": "success"
        },
        {
          "value": 302,
          "label": "确认入住失败",
          "type": "danger"
        }
      ],
      jjOrderStateList: [
        {
          "value": 0,
          "label": "未付款"
        },
        {
          "value": 1,
          "label": "预订成功"
        },
        {
          "value": 2,
          "label": "已取消"
        },
        {
          "value": 3,
          "label": "预订未到"
        },
        {
          "value": 4,
          "label": "已入住"
        },
        {
          "value": 5,
          "label": "已完成"
        },
      ],
      XCOrderStateList: [
        {
          "value": 100,
          "label": "新订未处理"
        },
        {
          "value": 101,
          "label": "接受新订"
        },
        {
          "value": 102,
          "label": "拒绝新订"
        },
        {
          "value": 200,
          "label": "取消未处理"
        },
        {
          "value": 201,
          "label": "接受取消"
        },
        {
          "value": 202,
          "label": "拒绝取消"
        },
        {
          "value": 203,
          "label": "已取消未处理"
        },
        {
          "value": 300,
          "label": "修改未处理"
        },
        {
          "value": 301,
          "label": "接受修改"
        },
        {
          "value": 302,
          "label": "拒绝修改"
        },
        {
          "value": 400,
          "label": "续住未处理"
        },
        {
          "value": 401,
          "label": "接受续住"
        },
        {
          "value": 402,
          "label": "拒绝续住"
        },
        {
          "value": 500,
          "label": "无效单未处理"
        },
        {
          "value": 501,
          "label": "无效单已接受"
        },
        {
          "value": 502,
          "label": "无效单已拒绝"
        },
      ],
      dataList: [],
      orderDetailActive: false,
      addAuthVisible: false,
      activeType: 'setTime',
      authData: null,
      timer: null
    }
  },
  computed: {
    getDlt_order_status() {
      return (type) => {
        return this.XCOrderStateList.find((el, index) => {
          return el.value == type
        }).label
      }
    },
    getOrder_status() {
      return (type) => {
        return this.orderStateList.find(el => {
          return el.value == type
        })
      }
    }
  },
  created() {
    this.getList()
    this.timer = setInterval(() => {
      console.log('更新数据', new Date().toUTCString())
      this.getList()
    }, 1000 * 60 * 10);
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null; // 清除引用
    }
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'system_order_status') {
        switch (this.getOrder_status(row.system_order_status).type) {
          case 'danger':
            return {
              background: 'red',
              color: '#FFFFFF'
            }
            break
        }
      }
    },
    //重新确认入住
    changeReConfirmCheckin(id) {
      this.$confirm("确定继续该操作", "提示", {
        type: "warning"
      }).then(async () => {
        this.listLoading = true
        let { data, code } = await reConfirmCheckin({
          new_dlt_order_id: id
        })
        console.log('data,code :>> ', data, code);
        if (code == 0) {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.getList()
        }
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.listLoading = false
      });

    },
    //处理完成
    async changehandleComplete(id) {
      this.$confirm("确定继续该操作", "提示", {
        type: "warning"
      }).then(async () => {
        this.listLoading = true
        let { data, code } = await handleComplete({
          new_dlt_order_id: id
        })
        console.log('data,code :>> ', data, code);
        if (code == 0) {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.getList()
        }
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.listLoading = false
      });

    },
    //处理完成显示条件
    geterrorStatus(value) {
      let errorStatus = [102, 104, 106, 202, 204, 206, 302];
      return !(errorStatus.includes(value.system_order_status) && value.error_order_handle_status === 0)
    },
    //接受取消
    async changeAcceptCancel(id) {
      let { data, code } = await acceptCancel({
        new_dlt_order_id: id
      })
      console.log('data,code :>> ', data, code);
      if (code == 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.getList()
      }
    },
    //拒绝订单
    async changeRefuseOrder(id) {
      console.log('object :>> ', id);
      let { data, code } = await refuseOrder({
        new_dlt_order_id: id
      })
      console.log('data,code :>> ', data, code);
      if (code == 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.getList()
      }
    },
    //重新接受订单
    async changeReAcceptOrder(id) {
      let { data, code } = await reAcceptOrder({
        new_dlt_order_id: id
      })
      console.log('data,code :>> ', data, code);
      if (code == 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.getList()
      }
    },
    //取消下单
    changeCancelOrder(id) {
      this.$confirm("确定继续该操作", "提示", {
        type: "warning"
      }).then(async () => {
        this.listLoading = true
        let { data, code } = await cancelOrder({
          new_dlt_order_id: id
        })
        console.log('data,code :>> ', data, code);
        if (code == 0) {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.getList()
        }
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.listLoading = false
      });

    },
    //重新下单
    changeReOrder(id) {
      this.$confirm("确定继续该操作", "提示", {
        type: "warning"
      }).then(async () => {
        this.listLoading = true
        let { data, code } = await reOrder({
          new_dlt_order_id: id
        })
        console.log('data,code :>> ', data, code);
        if (code == 0) {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.getList()
        }
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.listLoading = false
      });

    },
    //修改到店时间
    handleUpdate(value, type) {
      this.authData = value;
      this.addAuthVisible = true;
      this.activeType = type;
    },
    orderDetailHandler(value) {
      this.authData = value;
      this.orderDetailActive = true;
    },
    async getList() {
      console.log('getList', this.listQuery)
      this.listLoading = true
      let { data, code } = await orderList(
        this.listQuery
      )
      console.log(data, code);
      if (code == 0) {
        this.dataList = data.items;
        this.total = data.total;
      }
      this.listLoading = false;
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    errorRow({ row, rowIndex }) {
      let errorStatus = [102, 104, 106, 202, 204, 206, 302];
      if (errorStatus.includes(row.system_order_status) && row.error_order_handle_status === 0) {
        return "error-row";
      }
      return "";
    },
  },
  components: {
    OrderDetail,
    AddAuth
  }
}
</script>
<style lang="scss" scoped>
.filter-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  &>.filter-item {
    margin: 5px;
  }
}

.table {
  margin-top: 10px;
}

.btn {
  margin: 10px 10px 0px 0;
}

::v-deep .el-table .error-row {
  background-color: rgba(255, 0, 0, 0.2);
}
</style>
